<template>
  <tk-flex middle center class = 'layout'>
    <label class = 'subhead'>{{ label }}</label>
    <input :type="type" :value = "value" :placeholder = "placeholder" @input = 'updateAttrs($event)' class = 'fill'/>
  </tk-flex>
</template>
<script>
  export default {
    props: ['label', 'value', 'type', 'placeholder'],
    methods: {
      updateAttrs (e) {
        this.$emit('input', e.target.value)
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../assets/scss/main';
  .layout{
    border-bottom: 1px solid $border-color;
    height: 50px;
    label{
      margin-right: 15px;
    }
  }
</style>
